<template>
	<div class="swiper">
		<van-swipe class="swiper-list" :autoplay="3000" indicator-color="white">
			<template v-for="(item, index) in swiperData" :key="index">
				<van-swipe-item class="item">
					<img :src="item.url" alt="" />
				</van-swipe-item>
			</template>

			<template #indicator="{ active, total }">
				<!-- <div class="indicator">{{ active }} - {{ total }}</div> -->
				<div class="indicator">
					<template v-for="(val, key, index) in swiperGroup" :key="index">
						<span class="item" :class="{ active: swiperData[active]?.enumPictureCategory == key }">
							<span class="text">{{ getName(val[0].title) }}</span>
							<span class="count" v-if="swiperData[active]?.enumPictureCategory == key"
								>{{ getCategoryIndex(swiperData[active]) }} / {{ val.length }}</span
							>
						</span>
					</template>
				</div>
			</template>
		</van-swipe>
	</div>
</template>

<script setup>
	const props = defineProps({
		swiperData: {
			type: Array,
			default: () => [],
		},
	})

	// 对数据进行转换
	const swiperGroup = {}
	// 思路1(两次循环)
	/* for (const item of props.swiperData) {
		swiperGroup[item.enumPictureCategory] = []
	}
	for (const item of props.swiperData) {
		swiperGroup[item.enumPictureCategory].push(item)
	} */

	// 思路二
	for (const item of props.swiperData) {
		let valueArray = swiperGroup[item.enumPictureCategory]
		if (!valueArray) {
			valueArray = []
			swiperGroup[item.enumPictureCategory] = valueArray
		}

		valueArray.push(item)
	}

	const nameReg = /【(.*?)】/i
	const getName = (name) => {
		// return name.replace('：', '').replace('【', '').replace('】', '')
		const results = nameReg.exec(name)
		return results[1]
	}

	const getCategoryIndex = (item) => {
		const valueArray = swiperGroup[item.enumPictureCategory]
		return valueArray.findIndex((data) => data === item) + 1
	}
</script>

<style lang="less" scoped>
	.swiper {
		.swiper-list {
			.item {
				img {
					width: 100%;
				}
			}

			.indicator {
				position: absolute;
				right: 5px;
				bottom: 5px;
				padding: 2px 5px;
				font-size: 12px;
				color: #fff;
				background: rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;

				.item {
					margin: 0 5px;

					&.active {
						background-color: #fff;
						color: #333;
						padding: 0 3px;
						border-radius: 3px;
					}
				}
			}
		}
	}
</style>
